<template>
  <div>
    <div class="tlitle"> 热销推荐 </div>
    <ul>
        <router-link tag="li" class="item border-bottom" v-for="item of list" :key="item.id" :to="'/detail/' + item.id">
            <div class="item-img-wrapper">
                <img class="item-img" :src="item.imgUrl"/>
            </div>
            <div class="item-info">
                <p class="item-title">{{item.title}}</p>
                <p class="item-desc">{{item.desc}}</p>
                <button class="item-button">查看详情</button>
            </div>
        </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props:{
      list:Array
  }
}
</script>

<style lang="scss" scoped>
    @import '~styles/varibles.scss';
   .tlitle{
       margin-top: .2rem;
       line-height: .8rem;
       background: #eee;
       text-indent: .2rem;
   }
   .item{
       display: flex;
       height: 1.9rem;
       overflow: hidden;
       .item-img-wrapper{
         margin-left: .1rem;
         display: flex;
         align-items: center;
         justify-content: center;
         .item-img{
           width: 1.7rem;
           height: 1.4rem;
           padding: .1rem;
         }
       }
       
       .item-info{
           flex: 1;
           padding: .1rem;
           min-width: 0;
           .item-title{
               margin-top: .15rem;
               font-size: .32rem;
               @include ellipsis()
           }
           .item-desc{
               line-height: .4rem;
               color: #999;
               margin-top: .1rem;
               @include ellipsis()
           }
           .item-button{
               line-height: .44rem;
               background: #ff9300;
               padding: 0 .2rem;
               border-radius: .06rem;
               margin-top: .1rem;
               color: #fff;
           }
       }
   }
</style>
